<!-- 天气查询 -->
<template>
    <div class="weather-content">
        <div class="weather-item">
            <!-- 日期 -->
            <div class="day-time">05/26</div>
            <!-- 状态 -->
            <div class="day-weather">
                <!-- 
                src\assets\weather\qingtian.png
                -->
                <img src="../../assets/weather/qingtian.png" alt="">
                <p>晴</p>
            </div>
            <!-- 摄氏度 -->
            <div class="day-limit">10-20℃</div>
        </div>
        <div class="weather-item">
            <!-- 日期 -->
            <div class="day-time">05/26</div>
            <!-- 状态 -->
            <div class="day-weather">
                <!-- 
                src\assets\weather\qingtian.png
                -->
                <img src="../../assets/weather/qingtian.png" alt="">
                <p>多云</p>
            </div>
            <!-- 摄氏度 -->
            <div class="day-limit">10-20℃</div>
        </div>
    </div>
</template>
<script lang="ts">
</script>

<style lang="less" scoped>
.weather-content {
    background: linear-gradient(to bottom left, #ffffff, #48adff);
    margin-top: 10px;

    margin-bottom: 10px;
   
    font-size: 14px;
    .weather-item{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding:7px 0px;

        .day-time{
            flex:1;
            text-align: center;
        }
        .day-weather{
            flex: 1;
           display: flex;
           align-items: center  ;
            img{
                width:20px;
                margin-right: 5px;
                height: 20px;
            }
            p{
                font-size: 14px;
            }
        }
        .day-limit{
            flex: 1;
        }
       
        

    }

}
</style>
